<template>
	<view>
		<view>
			<headerView ref="headerView"></headerView>
			<adView ref="adView"></adView>
			<view class="main">
				<view class="content">

					<view class="content_info">

						<view class="ltinfo">
							<view class="tiezinfo">
								<view class="left">
									<view
										style="display: flex;justify-content: center;margin-top: 10px; color: #333333;">
										查看:&nbsp{{tz.LUNTAN_CKSL }}| 回复:&nbsp {{tz.LUNTAN_PLSL }}</view>
									<view class="userInfo" style="display: flex;flex-direction: row;">

										<view>
											<img src="../../../static/userimage.png" style="width: 55px;height: 55px;
									 border-radius: 100%;"></img>
										</view>
										<view style="display: flex;flex-direction: column;margin-left: 10px;
									margin-top: 5px;
									">
											<view class="content_title_content">{{tz.userName }}</view>
											<view class="content_title_content">注册会员</view>
										</view>

									</view>

								</view>
								<view class="yt_content">
									<view class="tiezixiangxi">
										<view class="tieziTitle">标题:&nbsp {{tz.LUNTAN_BIAOTI }}</view>
										<view class="tieziContent">
											内容: :&nbsp{{getContent(tz.LUNTAN_NEIRONG)}}</view>
										<view
											style=" color: #999999;margin-top: 10px; text-align: right; font-size: 14px;">
											发布时间：{{tz.LUNTAN_FTSJ }}</view>
									</view>
									<view class="lx" v-show="isShowLx">
										<view class="qq">qq号码: {{tz.qqhm }}</view>
										<view class="qq">微信账号: {{tz.wxhm }}</view>

									</view>
									<view class="lx" v-show="isShowlx_nt">
										<view style="color: #FB9E00;"> {{ntMsg}} </view>
									</view>

									<view class="nt">
										<view>app推广平台推提醒您：
											1、接受服务前请仔细核查对方经营资质，勿信夸张宣传和承诺

											2、任何要求预付定金或付款至个人账号的行为，均可能存在诈骗风险，请提高警惕

											3、app推广平台不介入任何交易过程，交易时请您提高警惕，以免蒙受损失
											4、请自己认真甄别信息的真实性，本平台不承担任何责任
										</view>

									</view>
								</view>

							</view>

							<view class="huifux">
								---------------------------------------------一共({{tz.LUNTAN_PLSL }})条回复--------------------------------------------------
							</view>
							<view v-for="pl in pls">


								<view class="hf_content">
									<view class="h_user_info">
										<view>
											<img src="../../../static/userimage.png" style="width: 45px;height: 45px;
							 border-radius: 100%;"></img>
										</view>
										<view style="display: flex;flex-direction: column;
									margin-top: 3px;margin-left: 10px;">
											<view>{{pl.USERNAME}}</view>
											<view>{{pl.HUITIE_HTSJ}}</view>
										</view>

									</view>

									<view class="h_yt" v-show="hasHf(pl.yuantie)">回复》》“作者:{{pl.USERNAME}}
										原贴：{{pl.yuantie}}“</view>
									<view class="h_content">{{pl.HUITIE_CONTENT}}</view>
									<view class="h_btn" @click="confirmDialog(pl.HUITIE_CONTENT,pl.HUITIE_APPUSERID)">回复
									</view>
								</view>

							</view>



							<pageView ref="pageView"></pageView>
							<view class="to_hf">
								<view class="to_hf_title">回复帖子</view>
								<view style="display: flex;flex-direction: row;">
									<view style="height: 280px;width: 250px;
									background: #F1EFEE;"></view>
									<view style="display: flex;flex-direction: column;">
										<view class="input_text">
											<textarea v-model="HUITIE_CONTENT" type="text"
												placeholder="请输入回复内容不少于2个字" />
										</view>
										<button class="btn" @click="huifu()">回复</button>
									</view>

								</view>

							</view>
						</view>


						<contentRight ref="contentRight">

						</contentRight>
					</view>

					<uni-popup ref="dialogInput" type="dialog">
						<uni-popup-dialog mode="input" title="回复帖子" value="" placeholder="请输入回复内容"
							@confirm="dialogInputConfirm" />
					</uni-popup>


				</view>

			</view>
			<footerView ref="footerView"></footerView>
		</view>
	</view>
</template>

<script>
	import headerView from '../header/Headerview.vue'
	import footerView from '../footer/Footer.vue'
	import adView from '../ads/MyAdView.vue'
	import contentRight from '../mainContent/mainContent_right.vue'
	import pageView from '../../views/PageView.vue'
	export default {
		components: {
			headerView,
			footerView,
			adView,
			contentRight,
			pageView,
		},

		onShow() {
			console.log("onShow")
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('showLt', (data) => {
				this.tz = data;
				console.log("帖子id", this.tz.LUNTAN_ID);
				if (this.$PublicData.getUserdata() == null || this.$PublicData.getUserdata().userName == null) {
					this.isShowLx = false;
					this.isShowlx_nt = true;
					console.log("yyyyyyyyyyyyyyyyyyyy");

					return;
				}
				var userId = this.$PublicData.getUserdata().uid;
				if (this.tz.LUNTAN_APPUSERID == userId) {
					this.isShowLx = true;
					this.isShowlx_nt = false;
					console.log("iiiiiiiiiiiiiiii");
					return;
				}
				//需要回复可见联系方式
				if (this.tz.need_huifu == 1) {
					if (this.tz.huifu_ids == '' || this.tz.huifu_ids == null) {
						this.isShowLx = false;
						this.isShowlx_nt = true;
						this.ntMsg = "联系方式 回复可见,请先回复"
						console.log("5555555555555555");
						return;
					} else if (this.tz.huifu_ids.includes(userId)) {
						console.log("4444444");
						this.isShowLx = true;
						this.isShowlx_nt = false;
						return;
					}
					else{
						this.isShowLx = false;
						this.isShowlx_nt = true;
						this.ntMsg = "联系方式 回复可见,请先回复"
						console.log("22222222222222222");
						return;
					}
				}
				console.log("888888");
				this.isShowLx = true;
				this.isShowlx_nt = false;
			})


		},
		created() {
			uni.$on(this.pageType, (page) => {
				this.getpl(page);
			})
		},


		mounted() {
			uni.$on(this.type, (res) => {
				uni.navigateTo({
					url: './addTiezi',
				})
				
			})
			this.$refs.contentRight.showbtnText("发布新帖",this.type);
			this.$refs.pageView.setType(this.pageType);
			this.$refs.adView.showMidAd();
			this.$refs.adView.hidSearch();
			this.$refs.adView.hidImageAd();
			this.$refs.contentRight.hidNewCpInfo();
			this.$refs.headerView.setIndex(3);
			this.$nextTick(() => {
				this.getpl(1);
			});
		},

		data() {
			return {
				tz: "",
				isShowLx: false,
				isShowNt: true,
				hf_content: "",
				pls: [],
				pageType: "plPage",
				isShowLx: false,
				isShowlx_nt: true,
				ntMsg: "联系方式 登录可见,请先登录",
				HUITIE_CONTENT: null,
				yuantie: null,
				hf_yuantie: null,
				hf_uid: 0, //回复哪个人
				type:"luntanDetail",
			}
		},
		methods: {
			async huifu() {
				if (this.$PublicData.getUserdata() == null ||
					this.$PublicData.getUserdata().userName == null) {
					this.$Utils.showErrorToast("请先登录");
					return;
				}
				if (this.HUITIE_CONTENT == null) {
					this.$Utils.showErrorToast("回复不能为空");
					return;
				}
				try {
					const res = await this.$postData({
						url: this.$apis.saveHt,
						data: {
							HUITIE_CONTENT: this.HUITIE_CONTENT,
							HUITIE_TIEZIID: this.tz.LUNTAN_ID,
							USERNAME: this.$PublicData.getUserdata().userName,
							HUITIE_APPUSERID: this.$PublicData.getUserdata().uid,
							yuantie: this.yuantie,
							hf_yuantie: this.tz.LUNTAN_BIAOTI,
							hf_id: this.tz.LUNTAN_APPUSERID,
						}
					})
					//this.datas = res.data.data;
					this.isShowLx = true;
					this.isShowlx_nt = false;
					uni.showToast({
						title: "回复成功",
						success: () => {
							this.getpl(1);
						}
					})

				} catch (e) {
					console.log("eee: ", e);
				}


			},
			hasHf(text) {
				if (text == null || text == "") {
					return false;
				}
				return true;
			},
			confirmDialog(yt, huid) {

				if (this.$PublicData.getUserdata() == null ||
					this.$PublicData.getUserdata().userName == null) {
					this.$Utils.showToast("请先登录");
					return;
				}
				this.yuantie = yt;
				console.log("ytytytyt", this.$PublicData.getUserdata().uid + "： " + this.tz.LUNTAN_APPUSERID);
				if (this.$PublicData.getUserdata().uid == huid) {
					this.$Utils.showToast("您不能回复您自己");
					return;
				}
				this.$refs['dialogInput'].open()
			},
			dialogConfirm(done) {
				this.$refs['popupMessage'].open()
			},
			dialogInputConfirm(val) {

				this.HUITIE_CONTENT = val
				this.huifu();

			},
			getContent(text) {
				if (text == null) {
					return "";
				}
				return text.replace("<p>", "").replace("</p>", "");
			},

			async getpl(page) {
				try {
					const res = await this.$getData({
						url: this.$apis.getpl,
						data: {
							page: page,
							tid: this.tz.LUNTAN_ID,
						}
					})
					if (res != null && res.data != null &&
						res.data.data.length > 0) {
						this.pls = res.data.data;
					}

					console.log("plsplsplsplspls", this.pls.length)

				} catch (e) {
					console.log("eee: ", e);
				}
			}


		}
	}
</script>

<style>
	.main {

		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.content_info {
		display: flex;
		flex-direction: row;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 1200px;
		height: 100%;
		border: 1px solid #F1EFEE;
	}

	.ltinfo {

		display: flex;
		flex-direction: column;
		margin: 3px;
		border: 1px solid #E5E5E5;
		height: auto;
		width: 100%;
	}

	.userInfo {
		padding-top: 20px;
		justify-content: center;
		display: flex;
		width: 250px;
		flex-direction: column;
	}

	.left {
		min-height: 300px;
		background: #F1EFEE;
		flex-direction: row;
	}

	.tiezixiangxi {


		padding: 10px;
	}

	.tieziTitle {
		padding-top: 5px;
		color: #000000;
		font-size: 18px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.lx {
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 20px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		border: 1px dashed #F0AD4E;
	}

	.qq {
		font-size: 18px;
		height: 30px;
		display: flex;
		text-align: center;
	}

	.tiezinfo {
		display: flex;
		flex-direction: row;
		border: 1px solid #E5E5E5;
	}

	.yt_content {

		margin-left: 5px;
		width: 100%;
	}

	.nt {
		margin-top: 90px;
		padding: 10px;
		font-size: 14px;
		color: #666666;
		background: #F1EFEE;
		border: 1px solid #E5E5E5;
	}

	.btn {
		width: 100px;
		border: 0.0625rem solid #F99B15;
		border-radius: 5px;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		height: 40px;
		background: #F99B15;
		color: #FFFFFF;
	}

	.huifux {
		font-size: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;

	}

	.hf_content {
		margin-top: 5px;
		padding: 10px;
		background: #F1EFEE;
		border-bottom: 0.0625rem solid #E5E5E5;
		display: flex;
		flex-direction: column;
	}

	.h_user_info {
		display: flex;
		flex-direction: row;
	}

	.h_content {
		display: flex;
		margin-top: 10px;
		font-size: 18px;
		color: #000000;
		margin-right: 50px;
	}

	.h_btn {
		margin-top: 20px;
		border: 0.0625rem solid #E5E5E5;
		border-radius: 0.1125rem;
		align-items: center;
		width: 70px;
		text-align: center;
		height: 30px;
		display: flex;
		justify-content: center;
		background: #FFFFFF;
	}

	.to_hf {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		border: 1px solid #E5E5E5;
	}

	.to_hf_title {
		color: #F99B15;
		padding: 5px;
		border-bottom: 2px solid #E5E5E5;
	}

	.input_text {
		margin: 20px;
		padding: 10px;
		border: 1px solid #E5E5E5;
		width: 600px;
		min-height: 150px;
	}

	.h_yt {
		min-height: 30px;
		display: flex;
		align-items: center;
		padding: 5px;
		background: #E4E7ED;
	}

	.lx_hid {}
</style>
